<template>
	<view class="Tabs">
		<view class="tabs__wrap">
			<scroll-view scroll-x="true" :scroll-left="scrollLeft" :scroll-with-animation="true">
				<view class="tab__nav" ref="tabNav">
					<view class="tab" :class="{'active__tab': index === cur}" v-for="(tab, index) in list"
						:key="index" @click.stop="selecTab(index)">
						<view class="tab__text">{{tab.name}}</view>
					</view>
					<view class="tab__line" :style="{left: lineLeft + 'px'}"></view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Tabs",
		props: {
			list: {
				type: Array,
				default: () => [],
				require: true
			},
		},
		data() {
			return {
				system: uni.getSystemInfoSync(),
				cur: 0,
				tabsInfo: [], // tab位置信息及滑块宽度
				lineWidth: 0, // 滑块宽度
				lineLeft: 0, // 滑块距离左侧的距离
				scrollLeft: 0, // 整体往左边滑动的距离
			};
		},
		created() {
			this.init()
		},
		methods: {
			init() {
				this.$nextTick(async () => {
					let This = this;
					const queryLine = uni.createSelectorQuery().in(this)
					let line = await this.selectQuery(queryLine, '.tab__line')
					this.lineWidth = line[0].width || 0
					// 获取所有的tab元素信息
					const query = uni.createSelectorQuery().in(This);
					this.tabsInfo = await this.selectQuery(queryLine, '.tab')
					this.tabsInfo.map((i, index) => {
						if (index <= This.cur) {
							This.lineLeft += i.width
							if (index === This.cur) {
								This.lineLeft = This.lineLeft - (This.lineWidth / 2) - (i.width / 2)
								This.scrollWrap(This.lineLeft)
							}
						}
					})
				})
			},
			async selectQuery(query, className) {
				return new Promise((resolve, reject) => {
					query.selectAll(className).boundingClientRect((data) => {
						resolve(data)
					}).exec()
				})
			},
			selecTab(index) {
				let This = this
				this.cur = index
				setTimeout(() => {
					this.lineLeft = 0
					this.tabsInfo.map((i, index) => {
						if (index <= This.cur) {
							This.lineLeft += i.width
							if (index === This.cur) {
								This.lineLeft = This.lineLeft - (This.lineWidth / 2) - (i.width / 2)
								This.scrollWrap(This.lineLeft)
							}
						}
					})
				}, 0)
			},
			scrollWrap(left) {
				let This = this;
				This.scrollLeft = 0
				This.scrollLeft = left - (this.system.screenWidth / 2)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Tabs {
		position: relative;

		.tabs__wrap {
			width: 100%;
			height: 80rpx;
			position: relative;
			padding: 0 24rpx;
			overflow-y: hidden;
			overflow-x: scroll;
			display: flex;
			justify-content: center;

			.tab__nav {
				height: 100%;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				position: relative;
				transition: all 0.3s; 

				.tab {
					flex: none;
					height: 100%;
					padding: 0 20rpx;
					transition: all 0.3s;

					.tab__text {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 100%;
					}
				}
				.active__tab {
					.tab__text {
						font-size: 36rpx;
						font-weight: 600;
					}
				}

				.tab__line {
					display: inline-block;
					position: absolute;
					bottom: 0;
					box-sizing: content-box;
					width: 40rpx;
					height: 6rpx;
					background-color: $theme-color;
					border-radius: 3rpx;
					transition: left 0.3s;
				}
			}
		}
	}
</style>